<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>BubbleTip Demo</title>
	
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
	
	<script src="js/jQuery.bubbletip-1.0.5.js" type="text/javascript"></script>
	<link href="js/bubbletip/bubbletip.css" rel="stylesheet" type="text/css" />
	<!--[if IE]>
	<link href="js/bubbletip/bubbletip-IE.css" rel="stylesheet" type="text/css" />
	<![endif]-->
	
	<style type="text/css">
		p, h4, li
		{
			font-family: Arial, Tahoma, Verdana;
		}
		pre.tip
		{
			margin: 0px;
			padding: 5px;
			font-size: 0.9em;	
		}
		pre.code
		{
			margin: 0px;
			padding: 20px;
			border: solid 1px #CCC;
			font-size: 1.0em;
		}
		em 
		{
			font-size: 0.9em;
			color: #777777;
		}
	</style>
	
	<script type="text/javascript">
		$(document).ready(function() {
			$('#a1_left').bubbletip($('#tip1_left'), {
				deltaDirection: 'left',
				animationDuration: 100,
				offsetLeft: -20
			});
		});
	</script>
</head>
<body>
	<div id="bubbletipanchor"></div>
	<h4>Issue 3</h4>
<p style="margin-top:100px;">MOUSEOVER to open a tooltip with twelve+ lines <a id="a1_left" href="#">to the left</a>.</p>
<div id="tip1_left" style="display:none;">
<pre class="tip">{ 
    deltaDirection: 'left', 
    animationDuration: 100,
    offsetLeft: -20 
}
line 6
line 7
line 8
line 9
line 10
line 11
line 12
line 13</pre>
</div>
</body>
</html>
